$(document).ready(function () {
    var controller = new ScrollMagic.Controller();

    var circles = document.querySelectorAll(".timeline .circle");
    var i;

    // create scene for every slide
    for (i = 0; i < circles.length; i++) {
        new ScrollMagic.Scene({
                triggerElement: circles[i],
                triggerHook: 0.7,
            })
            .on("enter", function (e) {
                $(this.triggerElement()).css("opacity", 1);
            })
            .addTo(controller);
    }

    //banner固定
    var winHeight = $(window).height();

    var banner1Duration = $("#chapter1").innerHeight();
    var banner2Duration = $("#chapter2").innerHeight();
    var banner3Duration = $("#chapter3").innerHeight();
    var banner4Duration = $("#chapter4").innerHeight();
    //第1章
    new ScrollMagic.Scene({
            triggerElement: "#banner1",
            triggerHook: 0,
            duration: banner1Duration
        })
        .setPin("#banner1")
        .addTo(controller);

    new ScrollMagic.Scene({
            triggerElement: "#chapter1",
            triggerHook: 0.95
        })
        .setClassToggle("#bannermask1", "bannermaskshow") // add class toggle
        .addTo(controller);


    //第2章
    new ScrollMagic.Scene({
            triggerElement: "#banner2",
            triggerHook: 0,
            duration: banner2Duration
        })
        .setPin("#banner2")
        .addTo(controller);

    new ScrollMagic.Scene({
            triggerElement: "#chapter2",
            triggerHook: 0.95
        })
        .setClassToggle("#bannermask2", "bannermaskshow") // add class toggle
        .addTo(controller);

    //第3章
    new ScrollMagic.Scene({
            triggerElement: "#banner3",
            triggerHook: 0,
            duration: banner3Duration
        })
        .setPin("#banner3")
        .addTo(controller);

    new ScrollMagic.Scene({
            triggerElement: "#chapter3",
            triggerHook: 0.95
        })
        .setClassToggle("#bannermask3", "bannermaskshow") // add class toggle
        .addTo(controller);
    //第4章
    new ScrollMagic.Scene({
            triggerElement: "#banner4",
            triggerHook: 0,
            duration: banner4Duration
        })
        .setPin("#banner4")
        .addTo(controller);

    new ScrollMagic.Scene({
            triggerElement: "#chapter4",
            triggerHook: 0.95
        })
        .setClassToggle("#bannermask4", "bannermaskshow") // add class toggle
        .addTo(controller);


    new ScrollMagic.Scene({
            triggerElement: "#yancong",
            triggerHook: 0.8,
        })
        .on("enter", function (e) {
            $("#cloudwrap1").addClass("ani-float1");
            $("#cloudwrap2").addClass("ani-float2");
            $("#cloudwrap3").addClass("ani-float3");
            $("#cloudwrap4").addClass("ani-float4");
            $("#cloudwrap5").addClass("ani-float5");
            $(".playaudio").addClass("ani-showaudio");
        }).addTo(controller);


    new ScrollMagic.Scene({
            triggerElement: "#chanyeyuan",
            triggerHook: 0.2,
            duration: 50
        })
        .on("enter", function (e) {
            $(".building").toggleClass("ani_zoominout");
        })
        .addTo(controller);
})